<template>
  <div>
    <el-dropdown id="userInfo" trigger="click">
      <el-row type="flex" justify="end" align="middle">
        <el-avatar id="avatar" fit="cover" :size="32" :src="`${avatar}`">
          <i class="el-icon-user-solid" />
        </el-avatar>
        <span id="username">{{ nickname || username }}</span>
      </el-row>

      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="visibleChangeAvatarDialog = true" icon="el-icon-picture-outline-round">修改头像
        </el-dropdown-item>
        <el-dropdown-item @click.native="visibleChangePasswordDialog = true" icon="el-icon-unlock">修改密码
        </el-dropdown-item>
        <el-dropdown-item divided @click.native="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <change-avatar :open.sync="visibleChangeAvatarDialog" />
    <change-password :open.sync="visibleChangePasswordDialog" @ok="logout" />
  </div>
</template>

<script>
import UserChangePasswordDialog from "@/components/Avatar/ChangePassword"
import { mapGetters } from "vuex"
import ChangePassword from "@/components/Avatar/ChangePassword"
import ChangeAvatar from "@/components/Avatar/ChangeAvatar"

export default {
  name: "Avatar",
  components: {
    ChangeAvatar,
    ChangePassword,
    UserChangePasswordDialog
  },
  data() {
    return {
      visibleChangeAvatarDialog: false,
      visibleChangePasswordDialog: false
    }
  },
  computed: {
    ...mapGetters(["avatar", "nickname", "username"])
  },
  methods: {
    logout() {
      this.$store.dispatch("logout").then(() => {
        location.reload() // In order to re-instantiate the vue-router object to avoid bugs
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#userInfo {
  height: 100%;
  cursor: pointer;
  user-select: none;
}

#username {
  font-size: 16px;
  margin-left: 10px;
}

.el-row {
  height: 100%;
}
</style>
